<script setup>
import { reactive, computed } from 'vue';
import { message } from 'ant-design-vue';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
import { login } from '@/service/services.js';
import { useAccountStore } from '@/stores/account.js';
import CryptoJS from 'crypto-js';
const router = useRouter();
const accountInfo = useAccountStore();
const state = reactive({
	formState: {
		account: '',
		password: '',
		remember: true
	}
});
const onFinish = () => {
	login({
		account: state.formState.account,
		password: CryptoJS.MD5(state.formState.password).toString()
	})
		.then((res) => {
			console.log(res.programes.split(','));
			accountInfo.menuList = res.menuList;
			accountInfo.account = state.formState.account;
			accountInfo.level = res.level;
			accountInfo.programes = res.programes.split(',');
			accountInfo.currentPrograme = res.currentPrograme;
			accountInfo.selectedKeys = ['/main/inbound'];
			sessionStorage.setItem('token', res.token);
			router.push('/main/inbound');
		})
		.catch((err) => {
			message.error(err);
		});
};

const onFinishFailed = (errorInfo) => {
	console.log('Failed:', errorInfo);
};
const disabled = computed(() => {
	return !(state.formState.account && state.formState.password);
});
</script>

<template>
	<section class="login-container">
		<section class="login">
			<section class="login-head">
				<!-- <img src="/login-head.png" class="login-bg" /> -->
				材料进销存管理系统
			</section>
			<a-form
				:model="state.formState"
				name="normal_login"
				class="login-form"
				@finish="onFinish"
				@finishFailed="onFinishFailed"
			>
				<a-form-item :rules="[{ required: true, message: '请输入账号!' }]">
					<input
						class="login-form-input"
						v-model="state.formState.account"
						placeholder="账号"
					/>
				</a-form-item>
				<a-form-item :rules="[{ required: true, message: '请输入密码!' }]">
					<input
						class="login-form-input"
						v-model="state.formState.password"
						type="password"
						placeholder="密码"
					/>
				</a-form-item>

				<!--        <a-form-item>-->
				<!--          <a-form-item name="remember" no-style>-->
				<!--            <a-checkbox v-model:checked="formState.remember"-->
				<!--              >Remember me</a-checkbox-->
				<!--            >-->
				<!--          </a-form-item>-->
				<!--          <a class="login-form-forgot" href="">Forgot password</a>-->
				<!--        </a-form-item>-->

				<a-form-item>
					<a-button
						:disabled="disabled"
						type="primary"
						html-type="submit"
						class="login-form-button"
					>
						登录
					</a-button>
				</a-form-item>
			</a-form>
		</section>
	</section>
</template>

<style scoped>
.login-container {
	width: 100vw;
	height: 100vh;
	/* background-color: #f1f4fd; */
	padding-right: 100px;
	display: flex;
	align-items: center;
	justify-content: end;
	background-image: url(/bg.png);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.login {
	/* max-width: 430px; */
	width: 460px;
	/* padding: 0;
	border-radius: 3px;
	-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
	background: rgba(255, 255, 255, 1); */
	border: none;
	padding: 0;
}
.login-head {
	/* background-color: #899fe1; */
	/* border-radius: 3px 3px 0 0; */
	color: #fff;
	padding-left: 20px;
	font-size: 26px;
}
.login-bg {
	width: 100%;
}
.login-form {
	margin: 20px 20px 0 20px;
	padding-bottom: 20px;
}
.login-form-input {
	width: 100%;
	height: 60px;
	color: #fff;
	border: unset;
	background: linear-gradient(90deg, #a4a4a4 0%, #261046 100%);
}
.login-form-button {
	width: 100%;
	height: 60px;
	color: #fff;
	border: unset;
	background: linear-gradient(90deg, #501794 0%, #3e70a1 100%);
}
input {
	border-radius: 6px;
	padding-left: 10px;
	border: unset !important;
	background-color: unset !important;
}
</style>
